<template>
<div class="app-container calendar-list-container">
<el-tabs type="card">
       <!-- 产品类别配置  -->
<el-tab-pane label="产品类别配置">
<el-row>
  <el-col :span="7" style='margin-top:15px;margin-right:10px'>
     <el-card class="box-card">
    <div class="filter-container">
     <el-button-group>
    <el-button type="primary" v-if="menuManager_btn_add" icon="plus" @click="handlerAdd">增加节点</el-button>
    <!-- <el-button type="primary" v-if="menuManager_btn_edit" icon="edit" @click="handlerEdit" >编辑</el-button> -->
    <el-button type='primary' v-if="menuManager_btn_add" icon="plus" @click="handleDelete">删除节点</el-button>
  </el-button-group>
  </div>
    <el-tree
      class="filter-tree"
      :data="treeData"
      :props="defaultProps"
      default-expand-all
      highlight-current
      node-key="id"
      :filter-node-method="filterNode"
      @node-click="getNodeData"
      ref="treeData">
    </el-tree>
     </el-card>
  </el-col>
  <el-col :span="16" style='margin-top:15px;'>
     <el-card class="box-card">
    <!-- <el-form :label-position="labelPosition" :rules="rules" label-width="80px" :model="form" ref="form">
      <h3 v-if="formStatus == 'update'">产品类别编辑</h3>
      <h3 v-if="formStatus == 'create'">节点添加</h3>
      <el-form-item label="父类名称" prop="parentId">
          <span>{{form.parentId}}</span>
      </el-form-item>
          <el-form-item label="排序序号" prop="idx">
          <el-input v-model="form.idx" :disabled="formEdit"  placeholder="请输入排序序号"></el-input>
      </el-form-item>
  
          <el-form-item label="类别名称" prop="nameCn">
          <el-input v-model="form.nameCn" :disabled="formEdit" placeholder="请输入类别名称"></el-input>
      </el-form-item>
      <el-form-item label="英文名称" prop="nameEn">
          <el-input v-model="form.nameEn" :disabled="formEdit" placeholder="请输入英文名称"></el-input>
      </el-form-item>
      <el-form-item label="HS编码" prop="hsCode">
          <el-input v-model="form.hsCode" :disabled="formEdit" placeholder="请输入HS编码"></el-input>
      </el-form-item>
      <el-form-item label="退税率" prop="taxRefundRate">
          <el-input v-model="form.taxRefundRate" :disabled="formEdit" placeholder="请输入退税率">
          <template slot="append">%</template>
          </el-input>
      </el-form-item>
      <el-form-item v-if="formStatus == 'create'">
        <el-button type="primary" @click="create">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
      <el-form-item v-if="formStatus == 'update'">
        <el-button type="primary" @click="update">更新</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form> -->
    <template>
      <el-table
          border
          style="width: 100%">
          <el-table-column
          label="序号"
          width="180">
          </el-table-column>
          <el-table-column    
          label="参数名称"
          width="180">
          </el-table-column>
          <el-table-column
          label="描述">
          </el-table-column>
          <el-table-column
          label="操作">
          <template slot-scope="scope">
          <el-button type="text">
            <i class='el-icon-close'></i>
          </el-button>
          </template>
          </el-table-column>
      </el-table>
    </template>
     </el-card>
  </el-col>
</el-row>
</el-tab-pane>
</el-tabs>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import * as api from '@/api/product/category/index';
// import { getTypeValue } from '@/api/manage/dict/dictValue/index';
export default {
  data() {
    return {
      filterText: '',
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      showElement: false,
      typeOptions: [],
      listQuery: {
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      labelPosition: 'right',
      form: {
        parentId: undefined,
        nameCn: undefined,
        code: undefined,
        idx: undefined,
        nameEn: undefined,
        hsCode: undefined,
        taxRefundRate: undefined,
        type: 'authority_menu_menu'
      },
      currentId: -1,
      menuManager_btn_add: false,
      menuManager_btn_edit: false,
      menuManager_btn_eadd: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeData.filter(val);
    }
  },
  created() {
    this.getList();
    this.menuManager_btn_add = this.elements['menuManager:btn_add'];
    this.menuManager_btn_edit = this.elements['menuManager:btn_edit'];
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getList() {
      api.productTree(this.listQuery).then(response => {
        this.treeData = response.data;
        console.log(response.data)
      });
    },
    getNodeData() {
      // debugger
      if (this.form.id) {
        this.formEdit = false;
        this.formStatus = 'update';
      }
      const node = this.$refs.treeData.getCurrentNode()
      const aa = this.$refs
      console.log(aa)
      if (!this.formEdit) {
        this.formStatus = 'update';
      }
      api.getDetailById(node.id).then(response => {
        this.form = response.data;
        console.log(response.data)
      });
      console.log(node)
    },
    handlerAdd() {
      this.resetForm();
      this.formEdit = false;
      this.formStatus = 'create';
    },
    handlerAddSon() {
      this.sonForm();
      this.formEdit = false;
      this.formStatus = 'create';
    },
    handlerEdit() {
      if (this.form.id) {
        this.formEdit = false;
        this.formStatus = 'update';
      }
    },
    append(treeData) {
      const newChild = { id: id++, label: 'testtest', children: [] };
      if (!treeData.children) {
        this.$set(treeData, 'children', []);
      }
      treeData.children.push(newChild);
    },
    handleDelete() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.getDetailByName(this.currentId).then(() => {
          this.getList();
          this.resetForm();
          this.onCancel();
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
        });
      });
      console.log(11111)
    },
    update() {
      console.log('data', this.form)
      console.log(this.form.id)
      api.updateDetailById(this.form).then(() => {
        this.getList();
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        });
      });
    },
    // 提交
    create() {
      this.form.idx = parseInt(this.form.idx)
      this.form.taxRefundRate = parseInt(this.form.taxRefundRate)
      api.addSingleObj(this.form).then(() => {
        this.getList();
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000
        });
      });
      console.log(this.form)
    },
    onCancel() {
      this.formEdit = true;
      this.formStatus = '';
    },
    resetForm() {
      this.form = {
        parentId: 0
      };
    },
    sonForm() {
      const node = this.$refs.treeData.getCurrentNode()
      console.log(node)
      this.form = {
        parentId: node.id,
        cateLevel: ++node.cateLevel
      }
    }
  }
}
</script>
